<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>个人博客</title>
	<link rel="stylesheet" href="../static/css/blogIndex.css">
	<link rel="stylesheet" href="../static/css/index.css">
	<script src="../static/js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="../static/js/common.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() { 
			ajaxAction("http://localhost:8080/blog/getById");
		});
		 function ajaxAction(action){
			  $.ajax({
	            type : "get",
	            url : action,
	            data :{},//设置数据源
	            dataType : "json",//设置需要返回的数据类型
				success : function(result) {
					for (var i = 0; i < result.length; i++) {
					var blog = result[i];
					//加载博客
					$("#blog-ui-div").append("<ul class='timeline_line' ><li><div class='public_article'><div class='article_info'>"
							+"<a href='blogArticle.jsp?id="+blog.id+"' style='font-size: 16px'>"
							+blog.title+"</a><p class='card_main_content_section'>"
							+blog.viceTitle+"</p><p class='card_main_content_footer'><span class='article_time'>发布时间："
							+formatDate(blog.createTime)+"</span><span class='article_viewNum'>浏览量："
							+blog.read+"次</span></p></div></div></li></ul>");
						}
					}
			  })
			}
		
		function onNotNull(index){
				if(index==1){
					$("#baidu").submit();
				}else if(index==2){
					$("#csdn").submit();
				}
			}
			
	</script>
</head>
<body>
	<!-- 头部页面 -->
	<jsp:include page="top.jsp" />
	<!-- 内容显示区 -->
	<div class="main_section">
		<div class="left_section clearfix">
			<div class="timeline_detail" id="blog-ui-div">
				
			</div>
		</div>
		<div class="right_section">
			<div class="card_section">
				<h2 class="small_card_title">搜索</h2>
				<div class="small_card_content">
					<div style='overflow:hidden'><!-- 百度搜索 -->
						<form  id = 'baidu' action="http://www.baidu.com/baidu" target="_blank" class="search_form">
							<input id ="baiduseach" class='search_text' type="text" name="word"  size="30" placeholder="请输入搜索内容" >
							<input class='search_btn' type="button" value="百度"  onclick="onNotNull('1');">
						</form>
						<form  id = 'csdn' action="http://so.csdn.net/so/search/s.do" target="_blank" class="search_form" >
							<input id ="csdnseach" class='search_text' type="text" name="q"  size="30" placeholder="请输入搜索内容" >
							<input class='search_btn search_CSDN' type="button" value="CSDN" onclick="onNotNull('2');" >
						</form>
					</div>
				</div>
			</div>
			<div class="card_section">
				<h2 class="small_card_title">推荐内容</h2>
				<div class="small_card_content">
					<ul>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
						<li class="recommend_article">
							<a href="javascript:void(0)">十条设计原则教你学会如何设计网页布局...</a>
							<p>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户...</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>